---
import type { GetStaticPaths } from 'astro'

import { COMBATS } from '@/consts/combats'
import { FIGHTERS } from '@/consts/fighters'
import { countries } from '@/consts/countries'
import { combate } from '@/consts/pageTitles'

import Layout from '@/layouts/Layout.astro'
import CombatVersus from '@/components/CombatVersus.astro'
import BoxerCard from '@/components/BoxerCard.astro'
import LiteYouTube from '@/components/LiteYouTube.astro'
import SectionTitle from '@/components/SectionTitle.astro'
import { getBoxerById } from '@/lib/boxers'

const { id } = Astro.params
const combat = COMBATS.find((c) => c.id === id)
if (!combat) return Astro.redirect('/404')

const fighter1 = getBoxerById(combat?.fighters[0])
const fighter2 = getBoxerById(combat?.fighters[1])

const description = `Combate entre ${fighter1?.name} y ${fighter2?.name} en La Velada del Año V de Ibai Llanos.`

const canonical = `https://www.infolavelada.com/combates/${id}`

const fighter1Country = countries.find((c) => c.id === fighter1?.country)
const fighter2Country = countries.find((c) => c.id === fighter2?.country)

export const getStaticPaths = (() => {
  return COMBATS.map((c) => ({
    params: { id: c.id },
  }))
}) satisfies GetStaticPaths

export const prerender = true
---

<Layout
  title={combate(fighter1?.name, fighter2?.name)}
  description={description}
  canonical={canonical}
>
  <section data-combat-id={id} class="relative mx-auto mt-24 min-h-screen max-w-6xl p-6">
    <CombatVersus id={id} />

    <!-- Informacion -->
    <div class="mx-auto mt-16 flex w-full max-w-2xl flex-col gap-8 p-3">
      <!-- Caracteristicas -->
      <div>
        <div class="my-8 grid grid-cols-3 gap-4">
          <!-- Columna del primer luchador -->
          <div class="group flex flex-col items-center space-y-4 xl:space-y-8">
            <!-- Foto del luchador -->
            <div class="h-42 flex justify-center">
              <BoxerCard
                id={fighter1?.id || ''}
                name={fighter1?.name || ''}
                versus=""
                class="scale-125"
              />
            </div>
            <!-- Características -->
            <div class="space-y-2 text-center text-sm font-bold text-black md:text-xl">
              <p>{fighter1?.age} años</p>
              <p>{fighter1?.height} mts</p>
              <p>{fighter1?.weight} kg</p>
              <p>{fighter1Country?.name.toLocaleLowerCase()}</p>
              <img
                src={fighter1Country?.image.src}
                alt={`Bandera de ${fighter1Country?.name ?? 'Desconocido'}`}
                class="md:w-25 inline-flex h-auto w-16"
              />
            </div>
          </div>

          <!-- Columna central con etiquetas -->
          <div class="flex flex-col items-center space-y-4 xl:space-y-8">
            <!-- Espacio para mantener alineación -->
            <div class="h-42"></div>
            <!-- Etiquetas -->
            <div class="space-y-2 text-center text-sm text-black opacity-70 md:text-xl">
              <p>EDAD</p>
              <p>ALTURA</p>
              <p>PESO</p>
              <p>PAÍS</p>
            </div>
          </div>

          <!-- Columna del segundo luchador -->
          <div class="group flex flex-col items-center space-y-4 xl:space-y-8">
            <!-- Foto del luchador -->
            <div class="h-42 flex justify-center">
              <BoxerCard
                id={fighter2?.id || ''}
                name={fighter2?.name || ''}
                versus=""
                class="scale-125"
              />
            </div>
            <!-- Características -->
            <div class="space-y-2 text-center text-sm font-bold text-black md:text-xl">
              <p>{fighter2?.age} años</p>
              <p>{fighter2?.height} mts</p>
              <p>{fighter2?.weight} kg</p>
              <p>{fighter2Country?.name.toLocaleLowerCase()}</p>
              <img
                src={fighter2Country?.image.src}
                alt={`Bandera de ${fighter2Country?.name ?? 'Desconocido'}`}
                class="md:w-25 inline-flex h-auto w-16"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Video del combate -->
    {
      combat?.video && (
        <div class="mx-auto mt-16 max-w-4xl px-5">
          <SectionTitle class="pb-8" title={` ${combat?.title}`} />
          <LiteYouTube
            videoId={combat?.video}
            title={combat?.title || 'Combate'}
            backgroundImage={`/images/combates/${combat?.id}.webp`}
            withShadowImage={true}
          />
        </div>
      )
    }
  </section>
  <style>
    .custom-clip {
      clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    .vertical-text {
      writing-mode: vertical-lr;
      text-orientation: upright;
    }

    @keyframes crash {
      0% {
        transform: translateX(100px);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0); /* Sin sombra */
        opacity: 0;
      }
      40% {
        transform: translateX(-10px);
        box-shadow: 10px 0 20px rgba(255, 255, 255, 0.6); /* Sombra visible más intensa */
        opacity: 1;
      }
      60% {
        transform: translateX(50px);
        box-shadow: 10px 0 20px rgba(255, 255, 255, 0.6); /* Mantener sombra */
      }
      80% {
        transform: translateX(0);
        box-shadow: 10px 0 20px rgba(255, 255, 255, 0.6); /* Mantener sombra */
      }
      100% {
        transform: translateX(-10px);
        box-shadow: 10px 0 20px rgba(255, 255, 255, 0.6); /* Mantener sombra */
      }
    }
  </style>
</Layout>
